<template>
  <van-radio-group
    v-model="checked"
    :direction="direction"
    :icon-size="iconSize"
    v-bind="$attrs"
  >
    <van-radio
      :name="radioItem.value"
      v-for="radioItem in props.options"
      :key="radioItem.value"
    >
      {{ radioItem.label }}
    </van-radio>
  </van-radio-group>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { RadioOptions } from './type'

export interface RadioProps {
  modelValue?: any
  options?: RadioOptions[]
  direction?: string
  iconSize?: string | number
}

const props = withDefaults(defineProps<RadioProps>(), {
  modelValue: '',
  options: () => [],
  direction: 'horizontal',
  iconSize: 16
})

const emits = defineEmits({
  'update:modelValue': (val) => !!val
})

const checked = computed({
  get: () => {
    return props.modelValue
  },
  set: (val) => {
    emits('update:modelValue', val)
  }
})

defineOptions({
  name: 'VRadio',
  inheritAttrs: false
})
</script>

<style scoped lang="scss">
:deep(.van-radio__label) {
  font-size: 16px;
}
</style>
